import styled from "styled-components";

export const SelectBox = styled.div`
    position: relative;
    .input_box{
        position: relative;
        width: 27.2rem;
        height: 3.6rem;
        display: flex;
        align-items: center;
        input{
            width: 27.2rem;
            height: 3.6rem;
            caret-color: transparent;
            cursor: pointer;
            background: #053561;
            border: .1rem solid #1B6DA1;
            padding-right: 3.6rem;
            color: #E4F2FF;
            font-size: 1.2rem;
            box-sizing: border-box;
            padding-left: 1rem;
        }
        input:focus{
            outline: none; /* 去除默认的焦点样式 */
        }
        input:focus, input:active {
            border-color: #1677ff; /* 例如，将边框颜色改为红色 */
        }
        .input_right{
            position: absolute;
            right: 0;
            top: 0;
            width: 3.6rem;
            height: 3.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            .iconfont {
                color: #2398E2;
                font-size: 1.6rem;
            }
            
        }
    }
    .select_list_ul{
        min-width: 24rem;
        max-height: 20rem;
        background: #093142;
        border-radius: 2px;
        border: 1px solid #3CC6BE;
        overflow-y: scroll;
        &::-webkit-scrollbar {
            width: 0; /* 滚动条宽度 */
        }
    }

 

`;


export const TreeFZBox = styled.ul<{
    show: string;
}>`
    position: absolute;
    left: 0;
    top: 3.8rem;
    max-height: 50rem; // 控制内容区域的最大高度
    overflow-y: scroll;
    transition: max-height 1s linear;
    background-color: #0867A5;
    padding: 0 2rem;
    display: ${props => props.show === 'true' ? 'block' : 'none'};
    &::-webkit-scrollbar {
        width: 1rem; /* 滚动条宽度 */
    }
`;

export const TreeTitleBox = styled.div<{
    $youyi: number,
    $select: 'true' | 'false',
}>`
    height: 4.4rem;
    display: flex;
    align-items: center;
    margin-left: ${props => `${props.$youyi * 4}rem`};
    cursor: pointer;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 1.4rem;
    color: ${props => props.$select === 'true' ? '#00AEFF' : '#BCE9FE'} ;
    &:hover{
        color: #00AEFF;
    }
    .add_box{
        font-size: 1.4rem;
        color: #00AEFF;
        margin-right: 1rem;

    }
    .jiedian{
        font-size: 1.4rem;
        color: #00AEFF;
        margin-right: 1rem;
    }
    .tree_name_box{
        font-size: 1.4rem;
        color: #CEE2FA; 
        margin-right: 1rem;
    }
    .name_color{
        color: #00AEFF;
    }
    .terr_type_box{
        width: 5rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: 100% 100%;
        font-size: 1.2rem;
        color: #CEE2FA;
        margin-right: 1rem;
    }
    .terr_biaoshi_box{
        width: 19.5rem;
        height: 2.8rem;
        padding: 0 1rem;
        line-height:2.8rem;
        box-sizing: border-box;
        font-size: 12px;
        color: #92A9C4;
        background-size: 100% 100%;
    }
    .iconfont {
        transition: transform 0.5s ease; 
    }
    .icon_xuanzhuan{
        transform: rotate(90deg);
    }
    .caozuo{
        font-size: 1.4rem;
        color: #1C84B4;
        margin-right: 1rem;
    }
`

export const TreeFZItemBox = styled.div`    
    .cesi{
        max-height: 500rem; // 控制内容区域的最大高度
        overflow: hidden;
        transition: max-height 0.5s ease-out;
    }
`